<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>{$model.title}-修改类别</h5>

        </div>
        <div class="ibox-content">
            <form method="post" action="update" class="form-horizontal" enctype="multipart/form-data">
                <!--类别好了-->
                <input type="hidden" name="id" value="{$model.id}">
                <div class="form-group">
                    <label class="col-sm-3 control-label">类别名称：</label>
                    <div class="col-sm-9">
                        <input required type="text" value="{$model.title}" name="title" class="form-control" placeholder=""> <span class="help-block m-b-none">建议不超过六个字</span>
                    </div>
                </div>

                {if $model.level==3&&$model.moduleid==1}
                <div class="modal inmodal fade" id="myModal6" tabindex="-1" role="dialog"  aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                                </button>

                                <h4 class="modal-title">关联子类目</h4>
                                <small class="font-bold">管理员不要随意操作
                            </div>
                            <div class="modal-body">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">选择父级分类：</label>
                                    <div class="col-sm-10" >
                                        <div class="col-sm-4">
                                            <div>一级分类</div>
                                            <select id="selF" style="height: 300px;" class="col-sm-12" multiple="">

                                            </select>
                                        </div>
                                        <div class="col-sm-1">

                                        </div>
                                        <div class="col-sm-4">
                                            <div>二级分类</div>
                                            <select id="selB" style="height: 300px;" class="col-sm-12" multiple="">

                                            </select>
                                        </div>

                                        <p id="pid"></p>
                                    </div>

                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">子叶类目：</label>
                                    <div class="col-sm-10 typeBox">

                                    </div>

                                </div>

                            </div>
                            <div class="modal-footer">
                                <div  class="btn btn-sm btn-primary" data-dismiss="modal">保存</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">封面图：</label>
                    <div class="col-sm-3" >
                        <input type="file" accept="image/jpeg,image/jpg,image/png" name="pic" class="form-control"><span class="help-block m-b-none">三级类目需要传图片</span>
                    </div>
                    <div class="col-sm-6" id="pic_box">
                        <img class='thumb' width='100px' height="100px" src="{$model.thumb}" style='max-height:200px'  />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">已关联后台类目：</label>
                    <div class="col-sm-3 select-type-box">

                        {if $types}
                            {volist name="types" id="type"}
                            <span onclick="delType(this)">{$type.title}<input type="hidden" name="type[]"  value="{$type.id}"/><i style="font-size: 18px;cursor: pointer;margin: 0 4px;color: #953b39" class="fa fa-times-circle js-select-type"></i></span>
                            {/volist}
                        {else}
                        暂时未选择
                        {/if}

                    </div>
                    <div class="col-sm-3">
                        <div onclick="linkType()" class="btn btn-sm btn-primary">选择</div>
                    </div>

                </div>



                {/if}

                {if $moduleid==2||$moduleid==6}
                <div class="form-group">
                    <label class="col-sm-3 control-label">封面图：</label>
                    <div class="col-sm-3" >
                        <input type="file" accept="image/jpeg,image/jpg,image/png" name="pic" class="form-control"><span class="help-block m-b-none">类目需要传图片</span>
                    </div>
                    <div class="col-sm-6" id="pic_box">
                        <img class='thumb' width='100px' height="100px" src="{$model.thumb}" style='max-height:200px'  />
                    </div>
                </div>
                {/if}
                <!--<div class="form-group">-->
                <!--<label class="col-sm-3 control-label">描述：</label>-->
                <!--<div class="col-sm-9">-->
                <!--<input type="text" name="desc" value="" class="form-control" placeholder="这个服务是用来xxxx的"> <span class="help-block m-b-none">说明该类别的内容。</span>-->
                <!--</div>-->
                <!--</div>-->


                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2">
                        <button class="btn btn-primary btn-sm"  type="submit">保存内容</button>
                        <div class="btn btn-white btn-sm" onclick="javascript:window.history.go(-1)">取消</div>
                    </div>
                </div>
            </form>
            <div id="js-openModal1" style="position: absolute;z-index: -2;right: -200px;visibility: hidden" data-toggle="modal" data-target="#myModal6">打开回复的model</div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {

        var db = [];
        //多维数组做数据来源
        $.get('/type/getFoldList?len=3',function (res) {
            if(res.code==1){
                db = res.data;
                _init()
            }else{
                alert('获取类别数据失败');
            }
        })

        function Init(node) {
            return node.html("");
        }


        function _init() {
            //初始化select节点
            $.each(db, function (idx,val) {

                $("#selF").append("<option data-tindex='"+idx+"' value='"+val.id+"'>" + val.title + "</option>");
            })

            //一级变动
            $("#selF").change(function () {
                //清空二三级
                Init($("#selB"));
                Init($("#selC"));

                $.each(db,function (idx1,val1) {
                    if ($("#selF option:selected").text() == val1.title) {

                        $.each(val1.child, function (idx2, val2) {
                            $("#selB").append("<option data-tindex='"+idx2+"'  value='"+val2.id+"'>" + val2.title + "</option>");
                        });

                        $("#selB").change(function () {
                            var findex = $("#selF option:selected").data('tindex'),
                                tindex= $("#selB option:selected").data('tindex')

                            var cArr = db[findex].child[tindex].child;

                            setTypeLast(cArr)
                        })
                    }
                })


                $('#selB option:first-child').attr("selected",true);

                var findex = $("#selF option:selected").data('tindex'),
                    tindex= $("#selB option:selected").data('tindex')

                var cArr = db[findex].child[tindex].child;

                setTypeLast(cArr)

            })
        }

        function setTypeLast(arr) {
            var inner = ''
            for(var x in arr){

                inner += "<label onclick='addType(\""+arr[x].title+'\",'+arr[x].id+")' class=\"checkbox-inline\"><input  type=\"checkbox\"  value=\""+arr[x].id+"\">"+arr[x].title+"</label>"
            }
            $('.typeBox').html(inner)

        }

    })

    function addType(text,id) {
        var inner = '<span class="js-select-type" onclick="delType(this)"><input type="hidden"  name="type[]"  value="'+id+'"/>'+text+'<i style="font-size: 18px;cursor: pointer;margin: 0 4px;color: #953b39" class="fa fa-times-circle js-select-type"></i></span>';
        if($('.select-type-box').html().indexOf(text)<0){
            $('.select-type-box').append(inner)
        }


    }

    function delType(ele) {
        console.log(ele)

        ele.innerHTML =''
    }

    // var SelectFalse = false; //用于判断是否被选择条件
    // function Submit()
    // {
    //     {if $model.level==3&&$model.moduleid==1}
    //     var chboxValue = [];
    //     var CheckBox = $('.js-select-type');//得到所的复选框
    //
    //     if(!CheckBox){
    //         parent.layer.msg('最少选一个子类目')
    //         return false
    //     }
    //
    //     for(var i = 0; i < CheckBox.length; i++)
    //     {
    //
    //         if(CheckBox[i].checked)//如果有1个被选中时
    //         {
    //             SelectFalse = true;
    //             chboxValue.push(CheckBox[i].value)//将被选择的值追加到
    //         }
    //     }
    //
    //     if(!SelectFalse)
    //     {
    //         parent.layer.msg('最少选一个子类目')
    //         return false
    //     }
    //     {/if}
    //
    //     document.forms[0].submit()
    //
    // }

</script>


<script>
    function linkType() {
        $('#js-openModal1').click();
    }

    $(function() {
        $("input[name='pic']").on("change", function () {

            var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
            if (objUrl) {
                var tempStr = "<img class='thumb' width='100px' height='100px' style='max-height:200px'  />",
                    $label = $('#pic_box');
                $label.find('img.thumb').remove()
                $label.append(tempStr);
                $label.find('img.thumb').attr('src', objUrl);

            }
        });

    });

    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>